<template>
  <el-card class="box-card page-view-area">
    <template #header>
      <div class="status"></div>
    </template>
    <div
      class="templates-wrapper"
      :key="item.id"
      :class="[item.id === templates.checkedId && 'templates-wrapper-active']"
      v-for="(item, index) in templates.list"
    >
      <div class="tools" v-if="item.id === templates.checkedId">
        <i
          class="el-icon-top"
          @click="upMove(index)"
          :class="{ 'i-disabled': index === 0 }"
        ></i>
        <i class="el-icon-delete" @click="handleDelete()"></i>
        <i
          class="el-icon-bottom"
          @click="nextMove(index)"
          :class="{ 'i-disabled': index === templates.list.length - 1 }"
        ></i>
      </div>
      <component
        @click="checkeComponent(item.id)"
        :is="item.componentName"
        :defaultProps="item.defaultProps"
      ></component>
    </div>
  </el-card>
</template>

<script>
import { FactoryStore } from '@/hooks';
import {
	GET_SHOP_DECORATION,
	UPDATE_CHECKEDID_SHOP_DECORATION,
	DELETE_CHECKEDID_SHOP_DECORATION,
	SWAP_SHOP_DECORATION
} from '@/utils/Const';
import { ref, getCurrentInstance } from 'vue';

import HyNavBar from './HyNavBar';
import HySearch from './HySearch';

export default {
	components : {
		HyNavBar,
		HySearch
	},
	setup () {
		let Instance = getCurrentInstance().proxy;
		let { getter, mutation } = FactoryStore({
			namespaced : 'shopDecoration',
			gettersMethod : [GET_SHOP_DECORATION],
			mutationsMethod : [
				UPDATE_CHECKEDID_SHOP_DECORATION,
				DELETE_CHECKEDID_SHOP_DECORATION,
				SWAP_SHOP_DECORATION
			]
		});
		let templates = ref(getter[GET_SHOP_DECORATION].value.mobile);
		let checkeComponent = (checkedId) => {
			let row = {
				ismobile : true,
				checkedId
			};
			mutation[UPDATE_CHECKEDID_SHOP_DECORATION](row);
		};

		let handleDelete = () => {
			Instance.$hyConfirm({
				subTitle : '确定删除该组件?',
				callback : async (done) => {
					mutation[DELETE_CHECKEDID_SHOP_DECORATION]({ ismobile : true });
					done();
				}
			});
		};

		let upMove = (index) => {
			if (Number(index) !== 0) {
				mutation[SWAP_SHOP_DECORATION]({
					index1 : index,
					index2 : index - 1,
					ismobile : true
				});
			}
		};
		let nextMove = (index) => {
			if (Number(index) !== templates.value.list.length - 1) {
				mutation[SWAP_SHOP_DECORATION]({
					index1 : index,
					index2 : index + 1,
					ismobile : true
				});
			}
		};
		return {
			upMove,
			nextMove,
			templates,
			handleDelete,
			checkeComponent
		};
	}
};
</script>

<style lang="scss" scoped>
.box-card {
  height: 85vh;
  width: 375px;
  margin: 0 20px;
  padding: 0;
  .el-card__header {
    padding: 0;
    border-bottom: 0;
  }
}
.status {
  height: 20px;
  width: 100%;
  background: url("~@/assets/images/status.png");
  background-size: cover;
}
.templates-wrapper {
  position: relative;
  cursor: pointer;
}
.tools {
  position: absolute;
  right: 0px;
  top: 0;
  z-index: 10;
  display: flex;
  background: rgba(0, 0, 0, 0.1);
  i {
    padding: 4px 6px;
    color: #2196f3;
    font-weight: bold;
    &:hover {
      background: rgba(0, 0, 0, 0.2);
    }
  }
}
.i-disabled {
  color: #cccccc !important;
  cursor: no-drop;
  pointer-events: none;
}
.templates-wrapper-active {
  border: 2px dotted #2196f3;
  padding: 5px 0;
  margin-bottom: 10px;
}
</style>
<style lang="scss">
.page-view-area {
  .el-card__header {
    padding: 0;
    border-bottom: 0;
  }
  .el-card__body {
    padding: 0;
  }
}
</style>
